<!DOCTYPE html>
<!--
 *  创建时间: 2020-12-16-23:48
 *  作   者: lpc
 *  Email : lpc@hll520.cn
-->
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，响应式布局 -->
    <title>个人中心</title>
    <!-- Bootstrap JQ核心CSS 、JS-->
    <script src="/static/jquery/3.5.1/jquery.min.js" type="text/javascript"></script>
    <link href="/static/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="/static/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="/static/linling-core-tools/js/linling-core-tools.js" type="text/javascript"></script>
    <!-- 适用于Surface /台式机Windows 8错误的IE10视口黑客 -->
    <script src="/static/linling-core-tools/js/ie10-viewport-bug-workaround.js" type="text/javascript"></script>
    <link href="/static/linling-core-tools/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
    <!--图标 -->
    <script type="text/javascript">
        $(function () {
            /*  从1-10中选择一个当背景  */
            let mg = Math.floor(Math.random() * 11);
            $("body").css({
                "background": "url('http://wtushop.hll520.cn/image/" + mg + ".jpg') no-repeat center",
                "background-size": "cover",
                "-webkit-background-size": "cover",
                "-o-background-size": "cover"
            });
        });
    </script>
</head>
<body>
<div class="container"
     style="margin-top: 150px;margin-bottom: 150px;padding: 30px;background-color: rgba(229,229,229,0.3);border-radius: 25px">
    <div class="row clearfix">
        <div class="col-md-6 column" style="vertical-align: center">
            <div class="col-md-6 column" style="text-align: center;">
                <img alt="头像" width="175px" height="150px" src="/top.png" class="img-circle"/>
            </div>
            <div class="col-md-6 column">
                <h1 id="name" th:text="${user.getName()}">NAME</h1>
                <p></p>
                <div id="info">
                    <p>用户名:<span style="color: #4cae4c" th:text="${user.getUsername()}"></span></p>
                    <p>部门:<span style="color:#28a4c9;" th:text="${user.getDepartment()}"></span></p>
                    <p>职务:<span style="color: #b92c28" th:text="${user.getOffice()}"></span></p>
                    <p>QQ:<span th:text="${user.getQQ()}"></span></p>
                    <p>电话:<span th:text="${user.getPhone()}"></span></p>
                </div>

            </div>

        </div>
        <div class="col-md-6 column">
            <div class="panel-body">
                <ul class="nav nav-stacked nav-pills">
                    <li class="active">
                        <a href="#">个人中心</a>
                    </li>
                    <li>
                        <a href="/course">我的课表</a>
                    </li>
                    <li>
                        <a href="/content">内容管理</a>
                    </li>
                    <li>
                        <a href="/collection">数据采集</a>
                    </li>
                    <li>
                        <a href="/user">用户管理</a>
                    </li>
                    <li>
                        <a href="/user/modify" th:href="'/user/modify?id='+${user.getId()}">修改资料</a>
                    </li>
                </ul>
            </div>
            <p></p>
            <a href="/login/out">
                <button type="button" class="btn btn-default btn-block btn-danger">退出登录</button>
            </a>
        </div>
    </div>
</div>
</body>
</html>